<!--
 * @Author: your name
 * @Date: 2021-11-20 19:33:43
 * @LastEditTime: 2021-11-20 19:35:40
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \bigdate\src\views\admin\componentsPage\qrcode.vue
-->
<template>
  <div class="warp">
    <Card>
      <div class="qucodeContent">
        <div>
          <VQrcode ref="qrcodeRef" :content="content"></VQrcode>
        </div>
        <div>扫一扫，自动跳转</div>
        <div>
              <a-input v-model:value="content" placeholder="请输入内容">
                 <template #addonAfter>
                        <div class="tocode" @click="downloadfun">
                              下载
                        </div>
                 </template>
              </a-input>
        </div>
      </div>
    </Card>
  </div>
</template>
<script lang="ts">
import { defineComponent,ref } from "@vue/runtime-core";
import VQrcode from "@/components/qrcode/index.vue";
import { Card, Button,Input } from "ant-design-vue";
export default defineComponent({
  name: "asd",
  components: {
    VQrcode,
    Button,
    Card,
  },
  setup() {
        const qrcodeRef = ref();
        const content = ref();
        content.value = 'http://120.76.142.67:3000/';
        const downloadfun = ()=>{
               qrcodeRef.value.downloadCodes();
        }
        const createqrCode = ()=>{
               qrcodeRef.value.createCode(); 
        }
        return {
              downloadfun,
              createqrCode,
              qrcodeRef,
              content
        }
  },
});
</script>

<style lang="less" scoped>
.warp {
  width: 20rem;
  margin: 1rem auto;
}
.qucodeContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .tocode{
        cursor: pointer; 
  }
  & > div {
    margin: 0.3rem 0;
    &:nth-of-type(2){
          color: #666;
          font-size: 12px;
    }
    &:nth-of-type(3) {
      width: 200px;
    }
  }
}
</style>